<template>
	<view class="test-container" :style="containerStyle">
		<!-- 顶部信息栏 -->
		<view class="top-bar" :style="{ paddingTop: safeDistance + 'px' }">
			<view class="back-button" @click="handleGoBack">
				<text class="back-icon">←</text>
			</view>
			<view class="progress-info">
				<text class="progress-text">{{ currentIndex + 1 }}/{{ questions.length }}</text>
			</view>
			<view class="timer">
				<text class="timer-icon">⏱</text>
				<text class="timer-text">{{ formatTime(timeUsed) }}</text>
			</view>
		</view>

		<!-- 进度条 -->
		<view class="progress-bar">
			<view class="progress-fill" :style="{ width: progressWidth + '%' }"></view>
		</view>

		<!-- 题目内容 -->
		<scroll-view class="question-scroll" scroll-y v-if="currentQuestion">
			<view class="question-card">
				<!-- 分类信息和题目类型标签 -->
				<view class="question-header">
					<!-- 分类信息 -->
					<view class="category-badge" v-if="getCategoryInfo(currentQuestion.category)">
						<text class="category-icon">{{ getCategoryInfo(currentQuestion.category)?.icon }}</text>
						<text class="category-name">{{ getCategoryInfo(currentQuestion.category)?.name }}</text>
					</view>

					<!-- 题目类型和难度标签 -->
					<view class="question-type">
						<view class="type-badge" :class="'type-' + currentQuestion.difficulty">
							<text class="type-text">{{ getTypeText(currentQuestion.type) }}</text>
						</view>
						<view class="difficulty-badge" :class="'diff-' + currentQuestion.difficulty">
							<text class="difficulty-text">{{ getDifficultyText(currentQuestion.difficulty) }}</text>
						</view>
					</view>
				</view>

				<!-- 题目标题 -->
				<text class="question-title">{{ currentQuestion.question }}</text>

				<!-- 代码示例（如果有） -->
				<view v-if="currentQuestion.code" class="code-block">
					<text class="code-text">{{ currentQuestion.code }}</text>
				</view>

				<!-- 选项列表 -->
				<view class="options-list">
					<view v-for="option in currentQuestion.options" :key="option.optionCode" class="option-item"
						:class="{ 'option-selected': isSelected(option.optionCode) }" @click="handleSelectOption(option.optionCode)">
						<view class="option-radio">
							<view class="radio-inner" v-if="isSelected(option.optionCode)"></view>
						</view>
						<view class="option-content">
							<text class="option-key">{{ option.optionCode }}.</text>
							<text class="option-text">{{ option.optionText }}</text>
						</view>
					</view>
				</view>

				<!-- 多选提示 -->
				<view v-if="currentQuestion.type === QuestionType.MULTIPLE" class="multi-tip">
					<text class="tip-icon">💡</text>
					<text class="tip-text">本题为多选题，可选择多个选项</text>
				</view>

				<!-- 查看答案按钮 -->
				<view class="answer-section">
					<button class="view-answer-btn" @click="handleToggleAnswer"
					:class="{ 'answer-expanded': showAnswer }">
					<text class="btn-icon">{{ showAnswer ? '▼' : '▶' }}</text>
					<text class="btn-text">{{ showAnswer ? '隐藏答案' : '查看答案' }}</text>
				</button>

				<!-- 答案展示区域 -->
				<view v-if="showAnswer" class="answer-content">
					<!-- 正确答案 -->
					<view class="answer-item">
						<text class="answer-label">正确答案：</text>
						<view class="answer-options">
							<!-- 直接从选项中获取正确答案 -->
							<text v-if="currentQuestion.options && currentQuestion.options.length > 0"
								v-for="(option, index) in currentQuestion.options.filter(opt => opt.isCorrect === 1)" :key="option.optionCode"
								class="answer-key">{{ option.optionCode }}</text>
							<text v-else class="no-answer">暂无答案</text>
						</view>
					</view>

					<!-- 答案解析 -->
					<view class="explanation-item" v-if="currentQuestion.explanation">
						<text class="explanation-label">解析：</text>
						<text class="explanation-text">{{ currentQuestion.explanation }}</text>
					</view>

					<!-- 代码示例（如果有） -->
					<view class="code-example" v-if="currentQuestion.code">
						<text class="code-label">代码示例：</text>
						<view class="code-block">
							<text class="code-text">{{ currentQuestion.code }}</text>
						</view>
					</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<button class="nav-button prev-button" @click="handlePrevQuestion" :disabled="currentIndex === 0">
				<text class="button-text">上一题</text>
			</button>

			<button v-if="currentIndex < questions.length - 1" class="nav-button next-button"
				@click="handleNextQuestion">
				<text class="button-text">下一题</text>
			</button>

			<button v-else class="nav-button submit-button" @click="handleSubmit">
				<text class="button-text">提交答卷</text>
			</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app';
	import { ref, computed } from 'vue';
	import { getRandomQuestionsByCategoriesAPI } from '@/services/questions';
	import { getCategoriesByTechCodeAPI } from '@/services/categories';
	import { saveExamRecordAPI } from '@/services/exam-records';
	import { getThemeStyles } from '@/stores/theme';
	import { QuestionType, DifficultyLevel, ExamStatus, QuestionTypeText, DifficultyLevelText } from '@/types';
	import type { Question, SaveExamRecordParams, Technology, Category } from '@/types';



	/**
	 * 解析题目数据
	 * 适配后端返回的数据格式，确保options字段为正确的数组格式
	 * @param question 题目数据
	 * @returns 解析后的题目数据
	 */
	const parseQuestion = (question: any): Question => {
		// 适配后端返回的数据格式，确保options为数组
		const options = Array.isArray(question.options) ? question.options : [];
		
		// 根据options中的isCorrect字段生成answer数组，以保持向后兼容
		// 注意：由于数据库结构变更，questions表不再直接存储answer字段
		const answer = options.filter((option: any) => option.isCorrect === 1).map((option: any) => option.optionCode);

		return {
			id: parseInt(question.id) || 0, // 将字符串ID转换为数字
			techCode: question.techCode || '',
			categoryCode: question.categoryCode || question.category || '',
			type: question.type || QuestionType.SINGLE,
			difficulty: question.difficulty || DifficultyLevel.EASY,
			category: question.categoryCode || question.category || '',
			question: question.question || '',
			options,
			explanation: question.explanation || '',
			code: question.code,
			answer,
			// 保留后端返回的额外字段
			creator: question.creator,
			modifier: question.modifier,
			modifyTime: question.modifyTime,
			version: question.version,
			deleted: question.deleted,
			createTime: question.createTime
		};
	};



	/**
	 * 技术信息
	 */
	const techInfo = ref<Technology | null>(null);

	/**
	 * 技术ID和分类（字符串，用于传递参数）
	 */
	const techCode = ref('');
	const categories = ref('');

	/**
	 * 题目列表
	 */
	const questions = ref<Question[]>([]);

	/**
	 * 分类列表（缓存）
	 */
	const techCategories = ref<Category[]>([]);

	/**
	 * 当前题目索引
	 */
	const currentIndex = ref(0);

	/**
	 * 用户答案记录
	 */
	const userAnswers = ref<Map<number, string[]>>(new Map());

	/**
	 * 计时器（已用时间，单位：秒）
	 */
	const timeUsed = ref(0);
	let timer : number | null = null;

	/**
	 * 是否显示答案
	 */
	const showAnswer = ref(false);

	// ============================================
	// 计算属性
	// ============================================

	/**
	 * 获取主题样式
	 */
	const themeStyles = computed(() => getThemeStyles());

	/**
	 * 容器背景样式
	 */
	const containerStyle = computed(() => ({
		background: themeStyles.value.bgGradient
	}));

	/**
	 * 安全距离（顶部内边距 = 安全区域 + 基础间距）
	 * 用于适配刘海屏等特殊屏幕
	 * 
	 * @returns {number} 安全距离（px）
	 */
	const safeDistance = computed(() => {
		// 基础间距 20px（约等于 40rpx），加上安全区域
		return (uni.getSystemInfoSync().safeAreaInsets?.top || 0) + 20;
	});

	/**
	 * 当前题目
	 */
	const currentQuestion = computed(() => {
		return questions.value[currentIndex.value];
	});

	/**
	 * 进度百分比
	 */
	const progressWidth = computed(() => {
		if (questions.value.length === 0) return 0;
		return ((currentIndex.value + 1) / questions.value.length) * 100;
	});

	// ============================================
	// 工具方法（需要在生命周期钩子之前定义）
	// ============================================

	/**
	 * 开始计时
	 */
	const startTimer = () => {
		timer = setInterval(() => {
			timeUsed.value++;
		}, 1000) as unknown as number;
	};

	/**
	 * 停止计时
	 */
	const stopTimer = () => {
		if (timer) {
			clearInterval(timer);
			timer = null;
		}
	};

	/**
	 * 格式化时间
	 * 
	 * @param {number} seconds - 秒数
	 * @returns {string} 格式化后的时间字符串（MM:SS）
	 */
	const formatTime = (seconds : number) : string => {
		const mins = Math.floor(seconds / 60);
		const secs = seconds % 60;
		return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
	};

	// ============================================
	// 生命周期钩子
	// ============================================

	// 页面加载（支持异步）
	onLoad(async (options : any) => {
		techCode.value = options.channelCode || options.techCode || '';
		categories.value = options.categoryCode || options.categories || '';

		if (!techCode.value || !categories.value) {
			uni.showToast({
				title: '参数错误',
				icon: 'none',
				duration: 2000
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
			return;
		}

		try {
			// 显示加载提示
			uni.showLoading({
				title: '加载题目中...',
				mask: true
			});

			// 加载当前技术下的分类数据
			const [categoriesRes] = await Promise.all([
				getCategoriesByTechCodeAPI(techCode.value)
			]);
			const categoriesData = categoriesRes.data || [];

			// 缓存分类数据
			techCategories.value = categoriesData;

			// 构建技术信息
			techInfo.value = {
				id: `${techCode.value}-exam`,
				code: techCode.value,
				name: `${techCode.value}知识测试`,
				icon: '',
				color: '',
				description: '',
				level: '初级-高级',
				tags: []
			};

			// 解析分类ID列表
			const categoryCodes = categories.value.split(',').filter(code => code);

			// 将分类ID数组转换为逗号分隔的字符串
			const categoryCodesStr = categoryCodes.join(',');

			// 直接调用API获取10条随机题目
			const questionsRes = await getRandomQuestionsByCategoriesAPI(techCode.value, categoryCodesStr);
			const questionsData = questionsRes.data || [];

			// 解析每个题目的 options 和 answer 字段
			questions.value = questionsData.map(parseQuestion);

			uni.hideLoading();

			if (questions.value.length === 0) {
				uni.showToast({
					title: '暂无题目',
					icon: 'none',
					duration: 2000
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
				return;
			}

			// 开始计时
			startTimer();
		} catch (error) {
			console.error('[Test Page] 加载题目失败:', error);
			uni.hideLoading();
			uni.showToast({
				title: '加载失败，请重试',
				icon: 'none',
				duration: 2000
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		}
	});

	
	// ============================================
	// 其他工具方法
	// ============================================

	/**
	 * 判断选项是否被选中
	 * 
	 * @param {string} key - 选项键值
	 * @returns {boolean} 是否被选中
	 */
	const isSelected = (key : string) : boolean => {
		const questionId = currentQuestion.value?.id;
		if (!questionId) return false;
		const answer = userAnswers.value.get(questionId) || [];
		return answer.includes(key);
	};

	/**
	 * 选择选项
	 * 
	 * @param {string} key - 选项键值
	 */
	const handleSelectOption = (key : string) => {
		const question = currentQuestion.value;
		if (!question) return;

		const questionId = question.id;
		let answer = userAnswers.value.get(questionId) || [];

		if (question.type === QuestionType.SINGLE || question.type === QuestionType.JUDGE) {
			// 单选或判断题，替换答案
			answer = [key];
		} else if (question.type === QuestionType.MULTIPLE) {
			// 多选题，切换选中状态
			if (answer.includes(key)) {
				answer = answer.filter(k => k !== key);
			} else {
				answer = [...answer, key];
			}
		}

		userAnswers.value.set(questionId, answer);
	};

	/**
	 * 上一题
	 */
	const handlePrevQuestion = () => {
		if (currentIndex.value > 0) {
			currentIndex.value--;
			showAnswer.value = false; // 切换题目时隐藏答案
		}
	};

	/**
	 * 下一题
	 */
	const handleNextQuestion = () => {
		if (currentIndex.value < questions.value.length - 1) {
			currentIndex.value++;
			showAnswer.value = false; // 切换题目时隐藏答案
		}
	};

	/**
	 * 切换答案显示
	 */
	const handleToggleAnswer = () => {
		showAnswer.value = !showAnswer.value;
	};

	/**
	 * 获取题型文本
	 * 
	 * @param {QuestionType} type - 题型
	 * @returns {string} 题型文本
	 */
	const getTypeText = (type: QuestionType): string => {
		return QuestionTypeText[type] || '';
	};

	/**
	 * 获取难度文本
	 * 
	 * @param {DifficultyLevel} difficulty - 难度
	 * @returns {string} 难度文本
	 */
	const getDifficultyText = (difficulty: DifficultyLevel): string => {
		return DifficultyLevelText[difficulty] || '';
	};

	/**
	 * 获取分类信息（根据当前技术ID筛选）
	 * 
	 * @param {string} categoryName - 分类名称
	 * @returns {Category | undefined} 分类信息
	 */
	const getCategoryInfo = (categoryCode : string) : Category | undefined => {
		if (!categoryCode || !techCode.value) {
			return undefined;
		}
		// 从缓存的分类列表中查找，优先通过code查找，兼容之前通过name查找的逻辑
		if (!Array.isArray(techCategories.value) || techCategories.value.length === 0) {
			return undefined;
		}
		// 首先尝试通过code查找
		let category = techCategories.value.find(cat => cat.code === categoryCode);
		// 如果通过code没找到，则尝试通过name查找（兼容旧数据）
		if (!category) {
			category = techCategories.value.find(cat => cat.name === categoryCode);
		}
		return category;
	};

	/**
	 * 提交答卷
	 */
	const handleSubmit = () => {
		// 检查是否有未作答的题目
		const unansweredCount = questions.value.filter(q => {
			const answer = userAnswers.value.get(q.id);
			return !answer || answer.length === 0;
		}).length;

		if (unansweredCount > 0) {
			uni.showModal({
				title: '提示',
				content: `还有${unansweredCount}道题未作答，确认提交吗？`,
				success: (res: any) => {
					if (res.confirm) {
						submitExam();
					}
				}
			});
		} else {
			submitExam();
		}
	};

	/**
	 * 提交测试
	 */
	const submitExam = async () => {
		stopTimer();

		// 计算成绩并记录每道题的答题情况
		let correctCount = 0;
		const questionResults: Array<{
			questionId: number;
			question: string;
			isCorrect: boolean;
			userAnswer: string[];
			correctAnswer: string[];
		}> = [];

		// 统计各类题目数量和正确数
		let easyCount = 0, easyCorrect = 0;
		let mediumCount = 0, mediumCorrect = 0;
		let hardCount = 0, hardCorrect = 0;
		let singleCount = 0, singleCorrect = 0;
		let multipleCount = 0, multipleCorrect = 0;

		// 处理每道题目
		for (let index = 0; index < questions.value.length; index++) {
			const question = questions.value[index];
			const userAnswer = userAnswers.value.get(question.id) || [];
			const isCorrect = checkAnswer(userAnswer, question);
			const correctAnswer = question.options
				.filter(opt => opt.isCorrect === 1)
				.map(opt => opt.optionCode);

			questionResults.push({
				questionId: question.id,
				question: question.question,
				isCorrect,
				userAnswer,
				correctAnswer
			});

			// 统计总正确数
			if (isCorrect) {
				correctCount++;
			}

			// 按难度统计
			switch (question.difficulty) {
				case 'easy':
					easyCount++;
					if (isCorrect) easyCorrect++;
					break;
				case 'medium':
					mediumCount++;
					if (isCorrect) mediumCorrect++;
					break;
				case 'hard':
					hardCount++;
					if (isCorrect) hardCorrect++;
					break;
			}

			// 按题型统计
			switch (question.type) {
				case 'single':
					singleCount++;
					if (isCorrect) singleCorrect++;
					break;
				case 'multiple':
					multipleCount++;
					if (isCorrect) multipleCorrect++;
					break;
			}

			// 错题记录已移除，现在通过测试记录明细表来查看错题
		}

		const totalCount = questions.value.length;
		const wrongCount = totalCount - correctCount;
		const accuracy = totalCount > 0 ? Number(((correctCount / totalCount) * 100).toFixed(2)) : 0;
		const score = Math.round(accuracy);

		// 构建明细数据
		const details = questionResults.map((result, index) => ({
			questionId: result.questionId,
			questionText: result.question,
			questionType: questions.value[index].type,
			difficulty: questions.value[index].difficulty,
			categoryCode: questions.value[index].categoryCode,
			categoryName: getCategoryInfo(questions.value[index].category)?.name || '',
			userAnswer: result.userAnswer,
			correctAnswer: result.correctAnswer,
			isCorrect: result.isCorrect,
			questionOrder: index + 1
		}));

		// 保存考试记录到后端
		try {
			const saveParams: SaveExamRecordParams = {
				techCode: techCode.value,
				techName: techInfo.value?.name || '',
				categories: categories.value,
				categoryNames: techCategories.value.map(cat => cat.name).join(','),
				totalCount,
				correctCount,
				wrongCount,
				timeUsed: timeUsed.value,
				score,
				accuracy,
				easyCount,
				easyCorrect,
				mediumCount,
				mediumCorrect,
				hardCount,
				hardCorrect,
				singleCount,
				singleCorrect,
				multipleCount,
				multipleCorrect,
				examStatus: ExamStatus.COMPLETED,
				details
			};
			await saveExamRecordAPI(saveParams);
		} catch (error) {
			console.error('保存考试记录失败:', error);
		}

		// 保存题目详情到临时存储，供结果页使用
		try {
			uni.setStorageSync('current_exam_questions', JSON.stringify(questionResults));
		} catch (error) {
			console.error('保存题目详情失败:', error);
		}

		// 跳转到结果页
		uni.redirectTo({
			url: `/pages/exam-records/result?score=${score}&correctCount=${correctCount}&totalCount=${totalCount}&accuracy=${accuracy}&timeUsed=${timeUsed.value}&techCode=${techCode.value}&categories=${categories.value}`
		});		
	};

	/**
	 * 检查答案是否正确
	 * 利用选项的isCorrect字段直接判断
	 * 
	 * @param {string[]} userAnswer - 用户答案（选项的optionCode数组）
	 * @param {Question} question - 题目对象，包含所有选项信息
	 * @returns {boolean} 是否正确
	 */
	const checkAnswer = (userAnswer : string[], question : Question) : boolean => {
		// 获取所有正确答案的optionCode
		const correctOptions = question.options.filter(option => option.isCorrect === 1).map(option => option.optionCode);
		
		// 检查用户选择的答案数量是否与正确答案数量一致
		if (userAnswer.length !== correctOptions.length) return false;
		
		// 排序后比较所有选项是否完全匹配
		const sortedUser = [...userAnswer].sort();
		const sortedCorrect = [...correctOptions].sort();
		return sortedUser.every((val, index) => val === sortedCorrect[index]);
	};

	// ============================================
	// 事件处理方法
	// ============================================

	/**
	 * 返回上一页
	 */
	const handleGoBack = () => {
		uni.showModal({
			title: '确认返回',
			content: '返回后当前答题记录将不会保存，确认返回吗？',
			success: (res: any) => {
				if (res.confirm) {
					stopTimer();
					uni.navigateBack();
				}
			}
		});
	};
</script>

<style lang="scss" scoped>
	.test-container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		position: relative;
		transition: background-color 0.3s ease;
	}

	/**
	 * 顶部信息栏
	 */
	.top-bar {
		flex-shrink: 0;
		padding-left: 32rpx;
		padding-right: 32rpx;
		padding-bottom: 20rpx;
		background: v-bind('themeStyles.bgCard');
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: v-bind('themeStyles.cardBoxShadow');
		position: relative;
		z-index: 10;
		gap: 20rpx;
		box-sizing: border-box;
	}

	.back-button {
		width: 72rpx;
		height: 72rpx;
		background: v-bind('themeStyles.bgCard');
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: v-bind('themeStyles.cardBoxShadow');
		transition: all 0.3s ease;
		flex-shrink: 0;

		&:active {
			transform: scale(0.92);
			box-shadow: v-bind('themeStyles.hoverBoxShadow');
		}
	}

	.back-icon {
		font-size: 44rpx;
		color: v-bind('themeStyles.textPrimary');
		font-weight: 700;
	}

	.progress-info {
		flex: 1;
	}

	.progress-text {
		font-size: 32rpx;
		font-weight: 800;
		color: v-bind('themeStyles.primaryColor');
	}

	.timer {
		display: flex;
		align-items: center;
		gap: 8rpx;
		padding: 12rpx 20rpx;
		background: v-bind('themeStyles.bgTertiary');
		border-radius: 100rpx;
	}

	.timer-icon {
		font-size: 28rpx;
	}

	.timer-text {
		font-size: 28rpx;
		font-weight: 700;
		color: v-bind('themeStyles.textPrimary');
	}

	/**
	 * 进度条
	 */
	.progress-bar {
		height: 6rpx;
		background: v-bind('themeStyles.borderColor');
		position: relative;
		z-index: 9;
	}

	.progress-fill {
		height: 100%;
		background: v-bind('themeStyles.primaryGradient');
		transition: width 0.3s ease;
	}

	/**
	 * 题目滚动区域
	 */
	.question-scroll {
		flex: 1;
		padding: 24rpx;
		overflow-y: auto;
		box-sizing: border-box;
	}

	.question-card {
		background: v-bind('themeStyles.bgCard');
		border-radius: 24rpx;
		padding: 32rpx;
		box-shadow: v-bind('themeStyles.cardBoxShadow');
		display: flex;
		flex-direction: column;
		margin-bottom: 24rpx;
	}

	/**
	 * 题目头部（分类和类型标签）
	 */
	.question-header {
		display: flex;
		align-items: center;
		gap: 16rpx;
		margin-bottom: 24rpx;
		flex-wrap: wrap;
	}

	/**
	 * 分类标签
	 */
	.category-badge {
		display: flex;
		align-items: center;
		gap: 10rpx;
		padding: 14rpx 24rpx;
		background: v-bind('themeStyles.primaryGradient');
		border-radius: 50rpx;
		box-shadow: v-bind('themeStyles.buttonBoxShadow');
		transition: all 0.3s ease;
		flex-shrink: 0;

		&:hover {
			transform: translateY(-2rpx);
			box-shadow: v-bind('themeStyles.hoverBoxShadow');
		}
	}

	.category-icon {
		font-size: 36rpx;
		line-height: 1;
		display: block;
	}

	.category-name {
		font-size: 28rpx;
		font-weight: 800;
		color: white;
		letter-spacing: 1rpx;
	}

	/**
	 * 题目类型标签
	 */
	.question-type {
		display: flex;
		gap: 12rpx;
		flex-shrink: 0;
	}

	.type-badge,
	.difficulty-badge {
		padding: 8rpx 16rpx;
		border-radius: 10rpx;
	}

	.type-easy {
		background: v-bind('themeStyles.successGradient');
	}

	.type-medium {
		background: v-bind('themeStyles.warningGradient');
	}

	.type-hard {
		background: v-bind('themeStyles.errorGradient');
	}

	.diff-easy {
		background: var(--info-gradient, linear-gradient(135deg, #4299e1 0%, #3182ce 100%));
	}

	.diff-medium {
		background: var(--warning-gradient, linear-gradient(135deg, #ed8936 0%, #dd6b20 100%));
	}

	.diff-hard {
		background: var(--error-gradient, linear-gradient(135deg, #f56565 0%, #e53e3e 100%));
	}

	.type-text,
	.difficulty-text {
		font-size: 22rpx;
		font-weight: 700;
		color: white;
	}

	/**
	 * 题目标题
	 */
	.question-title {
		font-size: 34rpx;
		font-weight: 800;
		color: v-bind('themeStyles.textPrimary');
		line-height: 1.7;
		display: block;
		margin-bottom: 28rpx;
		letter-spacing: 0.5rpx;
	}

	/**
	 * 代码块
	 */
	.code-block {
		background: #1e293b;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 24rpx;
		overflow-x: auto;
	}

	.code-text {
		font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
		font-size: 24rpx;
		color: #e2e8f0;
		line-height: 1.8;
		white-space: pre-wrap;
	}

	/**
	 * 选项列表
	 */
	.options-list {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.option-item {
		display: flex;
		align-items: flex-start;
		gap: 16rpx;
		padding: 24rpx;
		background: v-bind('themeStyles.bgSecondary');
		border: 3rpx solid transparent;
		border-radius: 16rpx;
		transition: all 0.3s ease;
		cursor: pointer;

		&:active {
			transform: scale(0.98);
		}
	}

	.option-selected {
		background: v-bind('themeStyles.bgTertiary');
		border-color: v-bind('themeStyles.primaryColor');
		box-shadow: 0 4rpx 12rpx v-bind('themeStyles.hoverBoxShadow');
	}

	.option-radio {
		width: 40rpx;
		height: 40rpx;
		border: 3rpx solid v-bind('themeStyles.borderColor');
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.option-selected .option-radio {
		border-color: v-bind('themeStyles.primaryColor');
		background: v-bind('themeStyles.bgCard');
	}

	.radio-inner {
		width: 24rpx;
		height: 24rpx;
		background: v-bind('themeStyles.primaryGradient');
		border-radius: 50%;
	}

	.option-content {
		flex: 1;
		display: flex;
		gap: 8rpx;
	}

	.option-key {
		font-size: 28rpx;
		font-weight: 700;
		color: v-bind('themeStyles.primaryColor');
	}

	.option-text {
		font-size: 28rpx;
		color: v-bind('themeStyles.textPrimary');
		line-height: 1.5;
	}

	/**
	 * 多选提示
	 */
	.multi-tip {
		display: flex;
		align-items: center;
		gap: 8rpx;
		margin-top: 24rpx;
		padding: 16rpx;
		background: linear-gradient(135deg, #fff9e6 0%, #ffe9a0 100%);
		border-radius: 12rpx;
	}

	.tip-icon {
		font-size: 28rpx;
	}

	.tip-text {
		font-size: 24rpx;
		color: v-bind('themeStyles.warningColor');
		font-weight: 600;
	}

	/**
	 * 查看答案区域
	 */
	.answer-section {
		margin-top: 32rpx;
		padding: 24rpx;
		background: var(--bg-card, #ffffff);
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx var(--card-shadow, rgba(0, 0, 0, 0.06));
	}

	.view-answer-btn {
		width: 100%;
		height: 88rpx;
		background: v-bind('themeStyles.primaryGradient');
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12rpx;
		border: none;
		transition: all 0.3s ease;
		box-shadow: v-bind('themeStyles.buttonBoxShadow');

		&:active {
			transform: scale(0.98);
			box-shadow: v-bind('themeStyles.hoverBoxShadow');
		}

		&.answer-expanded {
			background: v-bind('themeStyles.primaryGradient');
			box-shadow: v-bind('themeStyles.buttonBoxShadow');
		}
	}

	.btn-icon {
		font-size: 32rpx;
		color: white;
		font-weight: 700;
	}

	.btn-text {
		font-size: 32rpx;
		color: white;
		font-weight: 700;
	}

	.answer-content {
		margin-top: 24rpx;
		padding: 28rpx;
		background: v-bind('themeStyles.bgTertiary');
		border-radius: 16rpx;
		border-left: 6rpx solid v-bind('themeStyles.successColor');
		animation: slideDown 0.3s ease;
		box-shadow: 0 4rpx 16rpx v-bind('themeStyles.successBoxShadow');
	}

	@keyframes slideDown {
		from {
			opacity: 0;
			transform: translateY(-20rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.answer-item {
		display: flex;
		align-items: center;
		gap: 16rpx;
		margin-bottom: 20rpx;
	}

	.answer-label {
		font-size: 28rpx;
		font-weight: 700;
		color: v-bind('themeStyles.successColor');
	}

	.answer-options {
		display: flex;
		gap: 12rpx;
		flex-wrap: wrap;
	}

	.answer-key {
		min-width: 56rpx;
		height: 56rpx;
		background: #48bb78; /* 固定颜色，确保与文字有足够对比度 */
		color: white;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-weight: 700;
		box-shadow: 0 4rpx 12rpx rgba(72, 187, 120, 0.3);
	}
	
	.no-answer {
		font-size: 28rpx;
		color: #718096;
		font-style: italic;
	}

	.explanation-item {
		margin-top: 24rpx;
		padding: 20rpx;
		background: v-bind('themeStyles.bgCard');
		border-radius: 12rpx;
		border-left: 4rpx solid v-bind('themeStyles.infoColor');
	}

	.explanation-label {
		font-size: 28rpx;
		font-weight: 700;
		color: v-bind('themeStyles.infoColor');
		display: block;
		margin-bottom: 12rpx;
	}

	.explanation-text {
		font-size: 28rpx;
		color: v-bind('themeStyles.textPrimary');
		line-height: 1.8;
		display: block;
	}

	.code-example {
		margin-top: 24rpx;
		padding: 20rpx;
		background: #1e293b;
		border-radius: 12rpx;
	}

	.code-label {
		font-size: 28rpx;
		font-weight: 700;
		color: v-bind('themeStyles.infoColor');
		display: block;
		margin-bottom: 12rpx;
	}

	.code-block {
		padding: 16rpx;
		background: #0f172a;
		border-radius: 8rpx;
		border-left: 4rpx solid v-bind('themeStyles.infoColor');
	}

	.code-text {
		font-size: 24rpx;
		color: #e2e8f0;
		line-height: 1.8;
		font-family: 'Courier New', monospace;
		white-space: pre-wrap;
		word-break: break-all;
	}

	/**
	 * 底部操作栏
	 */
	.bottom-bar {
		flex-shrink: 0;
		padding: 24rpx 32rpx;
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
		background: transparent;
		display: flex;
		gap: 20rpx;
		position: relative;
		z-index: 10;
	}

	.nav-button {
		flex: 1;
		height: 88rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: 700;
		border: none;
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.97);
		}

		&[disabled] {
			opacity: 0.4;
		}
	}

	.prev-button {
		background: v-bind('themeStyles.primaryGradient');
		color: white;
		box-shadow: v-bind('themeStyles.buttonBoxShadow');
	}

	.next-button {
		background: v-bind('themeStyles.primaryGradient');
		color: white;
		box-shadow: v-bind('themeStyles.buttonBoxShadow');
	}

	.submit-button {
		background: v-bind('themeStyles.primaryGradient');
		color: white;
		box-shadow: v-bind('themeStyles.buttonBoxShadow');
		/* 添加文本阴影以提高在渐变背景下的可读性 */
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
		font-weight: 800;
	}

	.button-text {
		color: inherit;
		font-size: inherit;
		font-weight: inherit;
	}
</style>